import React from "react";
import { Text, View, TextInput, TouchableOpacity } from "react-native";
import BaseComponent from "../common/BaseComponent";
import SizeUtils from "../../common/SizeUtils";
import TImage from "../../components/TImage";

GoalData = [
  { title: "每日1千步", steps: 1000, desc: "活动筋骨" },
  { title: "每日3千步", steps: 3000, desc: "健体强身" },
  { title: "每日5千步", steps: 5000, desc: "强度适中" },
  { title: "每日1万步", steps: 10000, desc: "挑战自己" },
  { title: "每日2万步", steps: 20000, desc: "健走达人" },
  { title: "每日3万步", steps: 30000, desc: "超人身体素质" }
];
export default class SportSettingView extends BaseComponent {
  constructor(props) {
    super(props);

    this.state = {
      selectIndex: 0,
      steps: 0
    };
  }

  componentDidMount() {}

  componentWillUnmount() {}

  render() {
    if (!this.props.showSetting) {return(<View/>)}
    return (
      <View
        style={{
          position: "absolute",
          top: 0,
          left: 0,
          bottom: 0,
          right: 0,
          backgroundColor: "#00000022"
        }}
      >
        <View
          style={{
            marginHorizontal: SizeUtils.translateDesignWidthToCode(28),
            height: SizeUtils.translateDesignHeightToCode(536),
            backgroundColor: "#ffffff",
            borderRadius: SizeUtils.translateDesignWidthToCode(10),
            marginTop: SizeUtils.translateDesignHeightToCode(350)
          }}
        >
          {this._renderTitle()}
          <View
            style={{
              flexDirection: "row",
              marginLeft: SizeUtils.translateDesignWidthToCode(20),
              flexWrap: "wrap",
              height: SizeUtils.translateDesignHeightToCode(100)
            }}
          >
            {GoalData.map((item, index) => {
              return this._renderItem(item, index);
            })}
          </View>
          {this._renderInputBox()}
          <View style={{ flex: 1 }} />
          {this._renderbutton()}
        </View>
      </View>
    );
  }

  _renderbutton() {
    return (
      <TouchableOpacity
        style={{
          height: SizeUtils.translateDesignHeightToCode(80),
          marginHorizontal: SizeUtils.translateDesignWidthToCode(20),
          borderRadius: SizeUtils.translateDesignHeightToCode(40),
          backgroundColor: "#EE3535",
          alignItems: "center",
          justifyContent: "center",
          marginBottom: SizeUtils.translateDesignHeightToCode(40)
        }}
        onPress={this.onConfirmPress}
      >
        <Text
          style={{
            color: "#ffffff",
            fontSize: SizeUtils.translateFontSizeToCode(30)
          }}
        >
          确认设置
        </Text>
      </TouchableOpacity>
    );
  }

  _renderInputBox() {
    const title = "指定步数";
    const placeholder = "请输入每日目标步数";
    const unit = "步";
    return (
      <View
        style={{
          height: SizeUtils.translateDesignHeightToCode(84),
          marginHorizontal: SizeUtils.translateDesignWidthToCode(20),
          marginTop: SizeUtils.translateDesignHeightToCode(100),
          borderWidth: SizeUtils.translateDesignNumToCode(3),
          borderColor: "#E8E8E8",
          borderRadius: SizeUtils.translateDesignWidthToCode(4),
          flexDirection: "row",
          alignItems: "center",
          paddingLeft: SizeUtils.translateDesignWidthToCode(20),
          paddingRight: SizeUtils.translateDesignWidthToCode(34)
        }}
      >
        <Text
          style={{
            color: "#000000",
            fontSize: SizeUtils.translateFontSizeToCode(24),
            marginRight: SizeUtils.translateDesignWidthToCode(20)
          }}
        >
          {title}
        </Text>
        <TextInput
          style={{
            flex: 1,
            color: "#000000",
            fontSize: SizeUtils.translateFontSizeToCode(24)
          }}
          value = {''+this.state.steps}
          placeholder={placeholder}
          underlineColorAndroid="transparent"
          placeholderTextColor="#8F8F8F"
          onChangeText={(content) => this.setState({steps:content,selectIndex:-1})}
          keyboardType="numeric"
        />
        <Text
          style={{
            color: "#000000",
            fontSize: SizeUtils.translateFontSizeToCode(24)
          }}
        >
          {unit}
        </Text>
      </View>
    );
  }

  _renderItem(data, index) {
    const isSelect = this.state.selectIndex === index;
    const color = isSelect ? "#EE3535" : "#E3E3E3";
    const text = isSelect ? "√" : "";
    const { title, desc } = data;
    return (
      <TouchableOpacity
        key={index}
        style={{
          flexDirection: "row",
          width:(SizeUtils.getWindowSize().width-SizeUtils.translateDesignWidthToCode(100))/3,
          alignItems: 'center',
          justifyContent: 'center',
        }}
        onPress={() => {
          this.onSelectItemPress(index);
        }}
      >
        <View
          style={{
            height: SizeUtils.translateDesignWidthToCode(30),
            width: SizeUtils.translateDesignWidthToCode(30),
            backgroundColor: color,
            borderRadius: SizeUtils.translateDesignWidthToCode(15),
            alignItems: "center",
            justifyContent: "center"
          }}
        >
          <Text style={{ color: "#ffffff", backgroundColor: "#0000" }}>
            {text}
          </Text>
        </View>
        <View style={{ marginLeft: SizeUtils.translateDesignWidthToCode(10) }}>
          <Text
            style={{
              color: "#000000",
              fontSize: SizeUtils.translateFontSizeToCode(30)
            }}
          >
            {title}
          </Text>
          <Text
            style={{
              color: "#8F8F8F",
              fontSize: SizeUtils.translateFontSizeToCode(24)
            }}
          >
            {desc}
          </Text>
        </View>
      </TouchableOpacity>
    );
  }

  _renderTitle() {
    return (
      <View
        style={{
          height: SizeUtils.translateDesignHeightToCode(100),
          alignItems: "center",
          justifyContent: "center"
        }}
      >
        <Text
          style={{
            color: "#000000",
            fontSize: SizeUtils.translateFontSizeToCode(30)
          }}
        >
          设置目标
        </Text>
        <TouchableOpacity
          style={{
            position: "absolute",
            right: SizeUtils.translateDesignWidthToCode(20),
            top: SizeUtils.translateDesignHeightToCode(26),
            width: SizeUtils.translateDesignWidthToCode(50),
            height: SizeUtils.translateDesignWidthToCode(50),
            alignItems: "center",
            justifyContent: "center"
          }}
          onPress={this.onClosePress}
        >
          <TImage
            source={require("../../../resource/images/common/cha.png")}
            style={{ width: 25, height: 25 }}
          />
        </TouchableOpacity>
      </View>
    );
  }
  openSteps = steps =>{
    var select = -1;
    if (steps==='1000'||steps===1000) {
      select=0;
    }else if (steps==='3000'||steps===3000) {
      select=1;
    }else if (steps==='5000'||steps===5000) {
      select=2;
    }else if (steps==='10000'||steps===10000) {
      select=3;
    }else if (steps==='20000'||steps===20000) {
      select=4;
    }else if (steps==='30000'||steps===30000) {
      select=5;
    }
    console.log(select,steps)
    this.setState({ 
      selectIndex:select,
      steps:select>=0?'':steps
    });
  }
  onClosePress = () => {
    this.props.closeSetting();
  };
  onConfirmPress = () => {
    const { steps, selectIndex } = this.state;
    let aimSteps = selectIndex>=0?GoalData[selectIndex].steps:0;
    if (steps>0) {
      aimSteps=steps;
    }
    this.props.confirmSetting(aimSteps, selectIndex);
  };
  onSelectItemPress = selectIndex => {
    this.setState({ selectIndex:selectIndex,steps:'' });
  };
}
